<template>
	<view class="index">
		<template v-if="JiaZai_ZhuangTai =='YouShuJu'">
			<view class="YR-UI-LieBiao-16">
				<view class="P" @click="DianJi_JiaZai_GengDuo">点我加载更多</view>
				
				<template v-for="item in DuiHua_LieBiao">
					<view class="ZiJi-XunHuan" v-if="item.user.uid == DangQian_DengLu_YongHu">
						<view class="Zuo">
							<view class="NeiRong" v-if="item.content">
								{{item.content}}
							</view>
							<template v-if="item.file">
								<view
									v-if="item.file.type == 1"
									class="NeiRong-Tu" @click="$_TiaoZhuan('_Z_GongYong/TuPian_YuLan?url='+item.file.imageBigUrl)">
									<image :src="item.file.imageRatioUrl" mode="widthFix"></image>
								</view>
								<view
									v-if="item.file.type == 3"
									class="NeiRong-Yin">
									<YouRan-UI-YinPin
										Css="width:350rpx;"
										:Url="item.file.audioUrl"></YouRan-UI-YinPin>
								</view>
							</template>
							<view class="XinXi">
								<text>{{item.user.nickname}}</text>
								<text>{{item.datetimeFormat}}</text>
							</view>
						</view>
						<view class="You">
							<image :src="item.user.avatar" mode="widthFix"></image>
						</view>
					</view>
					<view class="XunHuan" v-else>
						<view class="Zuo">
							<image :src="item.user.avatar" mode="widthFix"></image>
						</view>
						<view class="You">
							<view class="NeiRong" v-if="item.content">
								{{item.content}}
							</view>
							<template v-if="item.file">
								<view
									v-if="item.file.type == 1"
									class="NeiRong-Tu" @click="$_TiaoZhuan('_Z_GongYong/TuPian_YuLan?url='+item.file.imageBigUrl)">
									<image :src="item.file.imageRatioUrl" mode="widthFix"></image>
								</view>
								<view
									v-if="item.file.type == 3"
									class="NeiRong-Yin">
									<YouRan-UI-YinPin
										Css="width:350rpx;"
										:Url="item.file.audioUrl"></YouRan-UI-YinPin>
								</view>
							</template>
							<view class="XinXi">
								<text>{{item.user.nickname}}</text>
								<text>{{item.datetimeFormat}}</text>
							</view>
						</view>
					</view>
				</template>
			</view>
			<view id="HuiDaoWeiBu"></view>
			<view style="width: 100%;height: 125rpx;"></view>
			<view class="YouRan-UI-WeiBu-XuanFu-PingLun">
				<textarea
					v-if="!ShiFou_Wei_LuYin"
					maxlength="-1"
					:show-confirm-bar="false"
					cursor-spacing="300"
					placeholder="说点什么吧..."
					v-model="Vmodel_NeiRong"></textarea>
				<view
					v-if="ShiFou_Wei_LuYin"
					@click="DianJi_KaiShi_LuYin"
					class="LuYin-AnNiu">{{LuYin_TiShi}}<text style="font-size: 28rpx;line-height: 28rpx;padding-left: 15rpx;">{{LuYin_TiShi_Miao}}秒</text></view>
				<text class="iconfont icon-smile" @click="$_TiaoZhuan('_Z_GongYong/BiaoQing_LieBiao')"></text>
				<text
					@click="DianJi_TuPian_AnNiu"
					class="iconfont icon-tupian"></text>
				<!-- #ifndef H5 -->
				<text
					@click="DianJi_YinPin_AnNiu"
					class="iconfont icon-yuyin"></text>
				<!-- #endif -->
				<view @click="DianJi_FaBu_PingLun">发布</view>
			</view>
		</template>
		<template v-if="JiaZai_ZhuangTai=='JiaZaiZhong'">
			<YouRan-UI-JiaZaiZhong LeiXing="JuBu"></YouRan-UI-JiaZaiZhong>
		</template>
		<template v-if="JiaZai_ZhuangTai=='WuShuJu'">
			<view class="YouRan-UI-WuShuJu-1 Flex" style="padding: 50rpx 0;">
				<text class="iconfont icon-cry Zt-ZhanWeiSe"></text>
				<view class="Zt-ZhanWeiSe">暂无任何数据</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				DangQian_DengLu_YongHu:"",
				DuiHua_LieBiao:[],
				Vmodel_NeiRong:"",
				JiaZai_ZhuangTai:"JiaZaiZhong",
				YeMa:2,
				ShiFou_Wei_LuYin:false,
				LuYin_TiShi:"单击录音",
				LuYin_TiShi_Miao:0,
			}
		},
		onShow() {
			uni.getStorage({
				key: 'XuanZhong_BiaoQing',
				success: (res) => {
					this.Vmodel_NeiRong += res.data;
					uni.removeStorage({ key: 'XuanZhong_BiaoQing' });
				}
			});
		},
		onLoad(e) {
			this.DangQian_DengLu_YongHu = uni.getStorageSync('YongHuXinXi').data.detail.uid;
			setTimeout(()=>{
				uni.pageScrollTo({
					selector: "#HuiDaoWeiBu",
					duration: 100
				});
			},50);
			this.ID = e.id;
			this.UID = e.uid;
			this.QingQiu_DuiHua_XiangQing();
			this.QingQiu_BianJiQi_PeiZhi();
		},
		methods: {
			QingQiu_BianJiQi_PeiZhi(){
				this.$_QingQiu(
					"GET","/api/v2/editor/post/config",{},
					(res) => {
						this.Api_BianJiQi_PeiZhi = res.data.data;
					}
				)
			},
			// 请求，对话，详情
			QingQiu_DuiHua_XiangQing(){
				this.$_QingQiu(
					"GET","/api/v2/conversation/"+this.ID+"/messages",
					{
						"orderDirection":"desc",
						"pageListDirection":"latest",
						"pageSize":15
					},
					(res) => {
						this.DuiHua_LieBiao = res.data.data.list.reverse();
						if(this.DuiHua_LieBiao.length){
							this.JiaZai_ZhuangTai = "YouShuJu"
							this.QingQiu_DuiHua_XiangQing_GengXin_ZhuangTai();
							setTimeout(()=>{
								uni.pageScrollTo({
									selector: "#HuiDaoWeiBu",
									duration: 100
								});
							},50);
						}else{
							this.JiaZai_ZhuangTai = "WuShuJu"
						}
					}
				)
			},
			// 点击，加载，更多
			DianJi_JiaZai_GengDuo(){
				uni.showLoading({ title: "加载中" });
				this.$_QingQiu(
					"GET","/api/v2/conversation/"+this.ID+"/messages",
					{
						"orderDirection":"desc",
						"pageListDirection":"latest",
						"pageSize":15,
						"page":this.YeMa
					},
					(res) => {
						uni.hideLoading();
						if(res.data.data.list.length){
							this.DuiHua_LieBiao = res.data.data.list.reverse().concat(this.DuiHua_LieBiao)
							this.YeMa++
						}else{
							uni.showToast({
								title: "没有数据啦",
								icon: "none",
								duration: 1000
							});
						}
					}
				)
			},
			// 请求，对话，详情，更新，状态
			QingQiu_DuiHua_XiangQing_GengXin_ZhuangTai(){
				this.$_QingQiu(
					"PUT","/api/v2/conversation/mark-as-read",
					{
						"type":"conversation",
						"conversationId":this.ID
					},
					(res) => {}
				)
			},
			// 点击，发送
			DianJi_FaBu_PingLun(){
				uni.showLoading({ title: "发送中" });
				this.$_QingQiu(
					"POST","/api/v2/conversation/send-message",
					{
						"uidOrUsername":this.UID,
						"message":this.Vmodel_NeiRong
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							this.Vmodel_NeiRong = "";
							this.QingQiu_DuiHua_XiangQing()
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
			// 点击，图片，按钮
			DianJi_TuPian_AnNiu(){
				uni.chooseImage({
					count:1,
					success: (res) => {
						this.DianJi_TuPian_AnNiu_ShangChuan(res.tempFiles[0].path);
					}
				})
			},
			// 点击，图片，按钮，上传
			DianJi_TuPian_AnNiu_ShangChuan(e){
				uni.showLoading({ title: "图片发送中" });
				uni.uploadFile({
					url: this.$_URL() + "/api/v2/common/upload-file",
					filePath: e,
					name: "file",
					header: this.$_Fresns_Header(),
					formData:{
						"tableName":"conversation_messages",
						"tableColumn":"message_file_id",
						"type":"image",
						"uploadMode":"file",
						"tableKey":this.UID
					},
					success: (res) => {
						if(JSON.parse(res.data).code == 0){
							this.FaSong_FuJian_FangFa(JSON.parse(res.data).data.fid);
						}else{
							uni.showToast({
								title:JSON.parse(res.data).message,
								icon:"none",
								duration:1000
							});
						}
						
					}
				})
			},
			
			
			// 点击，音频，按钮
			DianJi_YinPin_AnNiu(){
				this.ShiFou_Wei_LuYin = !this.ShiFou_Wei_LuYin;
			},
			// 点击，开始，录音
			DianJi_KaiShi_LuYin(){
				if(this.LuYin_TiShi == '单击录音'){
					uni.getRecorderManager().start();
					this.LuYin_TiShi = "停止";
					this.JiShiQi = setInterval(() => {
						this.LuYin_TiShi_Miao += 1;
						if(this.LuYin_TiShi_Miao == 58){
							this.LuYin_TiShi = '单击录音'
							this.LuYin_TiShi_Miao = 0
							clearInterval(this.JiShiQi)
							uni.getRecorderManager().stop();
							uni.getRecorderManager().onStop((res) => {
								this.YinPin_ShangChuan_FangFa(res.tempFilePath)
							});
						}
					}, 1000);
				}else{
					this.LuYin_TiShi = '单击录音'
					this.LuYin_TiShi_Miao = 0
					clearInterval(this.JiShiQi)
					uni.getRecorderManager().stop();
					uni.getRecorderManager().onStop((res) => {
						this.YinPin_ShangChuan_FangFa(res.tempFilePath)
					});
				}
			},
			
			
			
			// 音频，上传，方法
			YinPin_ShangChuan_FangFa(e){
				uni.showLoading({ title: "语音发送中" });
				uni.uploadFile({
					url: this.$_URL() + "/api/v2/common/upload-file",
					filePath: e,
					name: "file",
					header: this.$_Fresns_Header(),
					formData:{
						"tableName":"conversation_messages",
						"tableColumn":"message_file_id",
						"type":"audio",
						"uploadMode":"file",
						"tableKey":this.UID
					},
					success: (res) => {
						if(JSON.parse(res.data).code == 0){
							this.FaSong_FuJian_FangFa(JSON.parse(res.data).data.fid);
						}else{
							uni.showToast({
								title:JSON.parse(res.data).message,
								icon:"none",
								duration:1000
							});
						}
						
					}
				})
			},
			
			
			
			
			// 发送，附件，方法
			FaSong_FuJian_FangFa(e){
				this.$_QingQiu(
					"POST","/api/v2/conversation/send-message",
					{
						"uidOrUsername":this.UID,
						"fid":e
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							this.QingQiu_DuiHua_XiangQing()
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: $BeiJingSe;
	}
	.YR-UI-LieBiao-16{
		.P{
			margin: 25rpx 25rpx 0 25rpx;
			border: 1rpx solid $BeiJingSe;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 25rpx;
			border-radius: 100rpx;
		}
		.XunHuan{
			display: flex;
			padding: 25rpx 25rpx 0 25rpx;
			.Zuo{
				width: 80rpx;
				height: 80rpx;
				overflow: hidden;
				border-radius: 100%;
				image{
					display: block;
					width: 100%;
					height: auto;
				}
			}
			.You{
				flex: 1;
				margin: 0 0 0 15rpx;
				.NeiRong{
					display: inline-block;
					background: #FFF;
					box-shadow: 0 0 1rpx #999;
					padding: 15rpx 20rpx;
					border-radius: 15rpx;
					word-break: break-all;
				}
				.NeiRong-Tu{
					width: 50%;
					background: #FFF;
					box-shadow: 0 0 1rpx #999;
					padding: 15rpx 20rpx;
					border-radius: 15rpx;
					word-break: break-all;
				}
				.NeiRong-Yin{
					width: 390rpx;
					background: #FFF;
					box-shadow: 0 0 1rpx #999;
					padding: 15rpx 20rpx;
					border-radius: 15rpx;
					word-break: break-all;
				}
				.XinXi{
					font-size: 22rpx;
					line-height: 22rpx;
					color: $ZhanWeiSe;
					margin-top: 10rpx;
					text{
						padding: 0 10rpx 0 0;
					}
				}
			}
		}
		.ZiJi-XunHuan{
			display: flex;
			padding: 25rpx 25rpx 0 25rpx;
			.Zuo{
				flex: 1;
				margin: 0 15rpx 0 0;
				text-align: right;
				
				.NeiRong{
					display: inline-block;
					background: #FFF;
					box-shadow: 0 0 1rpx #999;
					padding: 15rpx 20rpx;
					border-radius: 15rpx;
					word-break: break-all;
					text-align: left;
				}
				.NeiRong-Tu{
					margin-left: auto;
					width: 50%;
					background: #FFF;
					box-shadow: 0 0 1rpx #999;
					padding: 15rpx 20rpx;
					border-radius: 15rpx;
					word-break: break-all;
				}
				.NeiRong-Yin{
					margin-left: auto;
					width: 390rpx;
					background: #FFF;
					box-shadow: 0 0 1rpx #999;
					padding: 15rpx 20rpx;
					border-radius: 15rpx;
					word-break: break-all;
				}
				.XinXi{
					font-size: 22rpx;
					line-height: 22rpx;
					color: $ZhanWeiSe;
					margin-top: 10rpx;
					text{
						padding: 0 10rpx 0 0;
					}
				}
			}
			.You{
				width: 80rpx;
				height: 80rpx;
				overflow: hidden;
				border-radius: 100%;
				image{
					display: block;
					width: 100%;
					height: auto;
				}
			}
		}
	}
	.YouRan-UI-WeiBu-XuanFu-PingLun{
		.LuYin-AnNiu{
			flex: 1;
			align-items: center;
			justify-content: center;
			background: #FFF;
			color: $YuanSe;
		}
	}
</style>
